<template>
<div>
  <el-table
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        prop="name"
        label="昵称">
    </el-table-column>
    <el-table-column
        prop="bh"
        label="ID">
    </el-table-column>
    <el-table-column
        prop="phone"
        label="手机号">
    </el-table-column>
    <el-table-column
        prop="birth"
        label="生日">
    </el-table-column>
    <el-table-column label="头像" align="center" prop="image" width="100">
      <template slot-scope="scope">
        <img :src="scope.row.image" :width="50" :height="50"/>
      </template>
    </el-table-column>
    <el-table-column
        prop="score"
        label="积分">
    </el-table-column>

    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="chakan(scope.row.id)" type="text" size="small">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
      title="详情界面"
      :visible.sync="dialogVisible">
    昵称：{{qing.name}} <br>
    ID:{{qing.bh}} <br>
    手机号:{{qing.phone}} <br>
    生日:{{qing.birth}} <br>
    头像:<img :src="qing.image" :width="100" :height="100"/> <br>
    积分:{{qing.score}} <br>
  </el-dialog>

</div>
</template>


<script >
import axios from "axios";

export default {
  data(){
    return {
      req: {
        name: "",
        phone: "",
      },
      tableData: [],
      dialogVisible: false,
      qing:{},
    }
  },
  methods:{

    findPage() {
            axios.post(`http://localhost:6001/user/user/findList`).then(res=>{
        this.tableData = res.data.data;
      })
    },
    chakan(id) {
      axios.post(`http://localhost:6001/user/user/find?id=${id}`).then(res=>{
        this.qing = res.data.data;
        this.dialogVisible = true;
      })
    }
  },
  created(){
    this.findPage();
  }
}
</script>

<style >

</style>
